<template>
    <div id="app">

        <router-view></router-view>

        <div class="page-tabbar" v-show="istabshow">
            <mt-tabbar fixed>
                <router-link to="/index" tag="a" class="mint-tab-item" id="tab1" ref="tab1">
                    <div class="mint-tab-item-icon">
                        <i slot="icon" class="alicon icon-shouye"></i>
                    </div>
                    <div class="mint-tab-item-label">首页</div>
                </router-link>
                <router-link to="/my" tag="a" class="mint-tab-item" id="tab2" ref="tab2">
                    <div class="mint-tab-item-icon">
                        <i slot="icon" class="alicon icon-wode"></i>
                    </div>
                    <div class="mint-tab-item-label">我的</div>
                </router-link>
            </mt-tabbar>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {

                istabshow: true,
                path: "",

            }
        },
        created(){
        		this.inittabbar()
        },
        methods: {
        		inittabbar:function(){
        				let add = this.$route.path.toLowerCase();
        				if(add == "/index" ) {
                    this.istabshow = true;
                } else {
                    this.istabshow = false;
                }
        		},
            tabbarclick: function(add) {
                if(add.indexOf("my") >= 0) {
                    return 2;
                } else {
                    return 1;
                }
            },
        },
        watch: {
            '$route': function(newadd, oldadd) {
                //tabbar的颜色变化
                var add = newadd.path.toLowerCase();
                this.path = add;
                var tabclick = this.tabbarclick(add);
                var clickdom = document.getElementById("tab" + tabclick);
                clickdom.style.color = "#517edb";
                for(var i = 1; i < 3; i++) {
                    if(i != tabclick) {
                        document.getElementById("tab" + i).style.color = "#a3a4a5"
                    }
                }
                //tabbar显示隐藏
                if(add == "/index" || add == "/my") {
                    this.istabshow = true;
                } else {
                    this.istabshow = false;
                }
            }
        }
    }
</script>

<style>
    #app {}
    
    #clean .mint-tabbar>.mint-tab-item.is-selected {
        background-color: #eaeaea;
        color: #517edb;
    }
    
    .mint-tabbar>a {
        text-decoration: none;
        color: #a3a4a5;
    }
    
    .mint-tabbar>.mint-tab-item.is-selected {
        background-color: transparent;
        color: #517edb;
    }
</style>